<template>
    <div >
        <el-scrollbar class="app-container-scroll-bar">
            <pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
            <card :sourceData="pageData" :data="data" icon-class="icon-jiqun" :id="id" :url="url"></card>

            <!-- tab start-->
            <el-tabs style="margin:0 20px;" v-model="activeName" type="border-card"  @tab-click="handleClick">
                <el-tab-pane label="应用日志" name="first">
                    <el-button style="z-index:1000;position:absolute;right:20px;top:10px;" type="info" @click="handleReshLOG">
                        刷新
                    </el-button>
                	<pageLog
										ref="pageLog"
										:options="pageLogOptions"
									></pageLog>
                </el-tab-pane>

                <el-tab-pane label="发布内容" name="two" v-if="instConf == 2">
                    <fabu-content :id="id"  @handleRestarbtn="handleRestarbtn" ref="fabuneirong"></fabu-content>
                </el-tab-pane>

                <el-tab-pane label="配置项信息" name="three" v-if="instConf == 1">
                   <pzinfo :instConfigs="instConfigs" :varsInfo="varsInfo" :relaInfo="relaInfo" @handleRestarbtn="handleRestarbtn"></pzinfo>
                </el-tab-pane>

                <el-tab-pane label="事件历史" name="second">
                    <history-step :id="id" ref="shijianlishi"></history-step>
                </el-tab-pane>

                <el-tab-pane label="监控" name="four"  v-if="deployType == 1">
                    <jiankong :appContainerId="appContainerId" :ip="containerIp" ref="jiankong" :isShow="isShow"></jiankong>
                </el-tab-pane>
                
                <el-tab-pane label="历史版本" name="five" >
                    <historyList @rollBack="refresh" @refresh="refresh(true)"  ref="historyList" :id="id"></historyList>
                </el-tab-pane>
                
            </el-tabs>
            <!-- tab end -->

        </el-scrollbar>
    </div>
</template>



<script>
import { searchLogInitIdInfoPage } from "@/service/swagger/LogController";
import pageLog from "@/view/components/log/pageLog";
import pageTitle from "@/view/layout/components/content/pageTitle";
import card from '@/view/components/card/detailCard.vue';
import historyStep from '@/view/components/step/historyStep.vue';
import fabuContent from '@/view/pages/shili/detail/fabuContent.vue';
import jiankong from '@/view/pages/shili/detail/jiankong.vue';
import historyList from '@/view/pages/shili/detail/historyList';
import pzinfo from '@/view/pages/shili/detail/pzinfo.vue';
import { listenner } from "@/utils/statuslistener";
import { appStatusFilter } from '@/filters/status/index';
import { getInstStatus } from '@/service/swagger/AcAppInstController'
import { getAppInstById } from '@/service/swagger/AcAppInstController'
import { restart } from '@/service/swagger/InstanceController.js'

export default {
    components: {
        card,
        pageTitle,
        historyStep,
        fabuContent,
        pzinfo,
        pageLog,
        jiankong,
        historyList
    },
    data() {
        return {
            isShow:false,
            activeName: 'first',
            id: this.$route.query.id,
            instConf: 1,
            deployType:this.$route.query.deployType,
            appContainerId:'',
            containerIp:'',
            pageTitle: "应用实例详情",
            dialogVisible: false,
            data: null,
            config: {
                appName: "应用名字",
                appType: "应用类型",
                appVersion: "应用版本",
                createTime: "创建时间",
                creatorName: "创 建 人",
                status: "应用状态",
                instName: "实例名称",
                instId: "实例ID",
                updateTime: "更新时间"
            },
            url: '/appcloud-log-es/appcloudes/searchLogInitIdInfoPage',//日志接口
            instConfigs: [],
            varsInfo: [],
            relaInfo: [],
            pageData: {},
            pageLogOptions: {
                autoGetData: true,
                serviceFN: searchLogInitIdInfoPage,
                params: {
                    id: this.$route.query.id,
                }

            }
        }
    },
    mounted() {
        this.initPage()
    },
    methods: {
    		refresh(b){
    			// console.log(this.id);	
    			if(b){
    				this.id = this.$route.query.id ;
    			}
    			// 
    			this.initPage()
    		},
        initPage() {
            if (this.id) {
                getAppInstById(this.id).then(ret => {
                    if (ret && ret.data && ret.code == 0) {
                        this.pageData = ret.data
                        // this.data = obj;

                        this.instConf = ret.data.instConf
                        this.deployType = ret.data.deployType

                        //监控的参数
                        this.appContainerId = ret.data.appContainerId
                        ret.data.hostsInfo.forEach(el=>{
                            if(el.type == 0){
                                this.containerIp = el.ip
                            }
                        })
                        
                        this.initCardData()
                        this.addStatusListenner();
                        this.instConfigs = ret.data.instConfigs;
                    }
                })
            }
        },
        initCardData() {
            let obj = {}
            for (let key in this.pageData) {
                const _name = this.config[key]
                if (_name) {
                    if (key == 'status') {
                        obj[_name] = {
                            html: appStatusFilter(this.pageData[key])
                        };
                    } else {
                        obj[_name] = this.pageData[key];
                    }

                }
            }
            
            if(this.pageData.hostsInfo){
            	this.pageData.hostsInfo.forEach(el=>{
            		if(el.type==0){
            			// 主机ip
            			obj["主机IP"] = el.ip
            		}else{
            			obj["容器IP"] = el.ip
            		}
            	})
            }
            
            this.data = obj;
        },
        // 重启
        handleRestarbtn(){
            this.$confirm("确定重启？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						restart({id:this.id}).then(ret=>{
							this.initPage()
						})
					})
        },
        addStatusListenner() {
            const statusStatic = (status) => {
                // 是否是稳定状态
                const isStatic = !(appStatusFilter(status).indexOf("...") > -1);
                return isStatic;
            }
            if (!statusStatic(this.pageData.status)) {
                listenner({
                    api: {
                        serviceFN: getInstStatus,
                        params: [
                            this.id,
                        ],
                    },
                    callBack: (ret) => {

                        this.pageData.status = ret.data[0].status;

                        this.initCardData();

                        let status = statusStatic(this.pageData.status);
                        this.$refs.pageLog.setStatusStatic(status);
                        return status;
                    },
                }, this)
            }
        },
        handleClick(tab, event) {
            if(tab.name == 'four'){
               this.isShow = true
            }else{
                this.isShow = false
            }
            if(tab.name == 'two'){
                this.$refs.fabuneirong.initData()
                this.$refs.fabuneirong.vmPath = ""
                this.$refs.fabuneirong.mntPath = ""
            }
            if(tab.name == 'second'){
                this.$refs.shijianlishi.getData()
            }
            // bug解决 
            // 此bug 因 v-chart 渲染机制导致
            // 用来使 tab 页 中的监控各图表，宽度自动适应
            setTimeout(()=>{
                window.dispatchEvent(new Event("resize"))
            },200)
        },
          //刷新日志
        handleReshLOG(){
            this.$refs.pageLog.initPage()
            this.$refs.pageLog.initData()
        }
    }


}
</script>


<style scope>
</style>

